﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">  
	<title>救援界面</title>
	<meta name="keywords" content="Bootstrap模板,Bootstrap3模版,Bootstrap模板下载,Bootstrap后台模板,Bootstrap教程,Bootstrap中文,后台管理系统模板,后台模板下载,后台管理系统,后台管理模板">
	<meta name="description" content="JS代码网提供Bootstrap模板,后台管理系统模板,后台管理界面,Bootstrap后台板版下载">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.css" rel="stylesheet">
	<link href="css/site.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

    <![endif]-->
	<!--[if lte IE 8]><script src="js/excanvas.min.js"></script><![endif]-->
    <style type="text/css">
    html, body {
        height: 100%;
    }

    </style>
      <script src="js/jquery.js"></script>
  <script src="js/echarts.js"></script>
  <script src="js/echarts-gl.min.js"></script>
      <script src="js/jquery.flot.js"></script>
      <script src="js/jquery.flot.resize.js"></script>
      <script src="js/bootstrap.min.js"></script>
      <script type="text/javascript" src="js/maphilight-master/jquery.maphilight.js"></script>
      <script type="text/javascript">
          function qiya(){
              window.location.href="/qiya";
          }
          function wendu(){
              window.location.href="/wendu";
          }
          function dianya(){
            window.location.href="/dianya";
          }
          function ceju(){
            window.location.href="/ceju";
          }

      </script>
  </head>
  <body>
    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container-fluid" align="center">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
            <button style="width: 120px;" class="btn btn-success" onclick="qiya()" id="shoudong">下载气压数据</button>
            <button style="width: 120px" class="btn btn-success" onclick="wendu()" id="fanhang">下载温度数据</button>
          <button style="width: 120px" class="btn btn-success" onclick="dianya()" id="fuwei">下载电压数据</button>
          <button style="width: 120px" class="btn btn-success" onclick="ceju()" id="ceju">下载测距数据</button>
        </div>
      </div>
    </div>
    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span2">
          <label class="control-label"> </label>
          <div style="height: 100px"></div>
          <div>
            <div >
              <span style="width: 35px;display:inline-block;">S000</span>
              <button id="0"   onclick="anniu(id)" class="btn btn-default" type="button">温度</button>
              <button id="11"   onclick="anniu(id)" class="btn btn-default" type="button">气压</button>
              <button id="22"   onclick="anniu(id)" class="btn btn-default" type="button">电压</button>
            </div>
            <div >
              <span style="width: 35px;display:inline-block;">H021</span>
              <button id="1"   onclick="anniu(id)" class="btn btn-default" type="button">温度</button>
              <button id="12"   onclick="anniu(id)" class="btn btn-default" type="button">气压</button>
              <button id="23"   onclick="anniu(id)" class="btn btn-default" type="button">电压</button>
            </div>
            <div >
              <span style="width: 35px;display:inline-block;">H022</span>
              <button id="2"   onclick="anniu(id)" class="btn btn-default" type="button">温度</button>
              <button id="13"   onclick="anniu(id)" class="btn btn-default" type="button">气压</button>
              <button id="24"   onclick="anniu(id)" class="btn btn-default" type="button">电压</button>
            </div>
            <div >
              <span style="width: 35px;display:inline-block;">H023</span>
              <button id="3"  onclick="anniu(id)" class="btn btn-default" type="button">温度</button>
              <button id="14"  onclick="anniu(id)" class="btn btn-default" type="button">气压</button>
              <button id="25"  onclick="anniu(id)" class="btn btn-default" type="button">电压</button>
            </div>
            <div >
              <span style="width: 35px;display:inline-block;">H024</span>
              <button id="4"  onclick="anniu(id)" class="btn btn-default" type="button">温度</button>
              <button id="15"  onclick="anniu(id)" class="btn btn-default" type="button">气压</button>
              <button id="26"  onclick="anniu(id)" class="btn btn-default" type="button">电压</button>
            </div>
            <div >
              <span style="width: 35px;display:inline-block;">H025</span>
              <button id="5"  onclick="anniu(id)" class="btn btn-default" type="button">温度</button>
              <button id="16"  onclick="anniu(id)" class="btn btn-default" type="button">气压</button>
              <button id="27"  onclick="anniu(id)" class="btn btn-default" type="button">电压</button>
            </div>
            <div >
              <span style="width: 35px;display:inline-block;">H026</span>
              <button id="6"  onclick="anniu(id)" class="btn btn-default" type="button">温度</button>
              <button id="17"  onclick="anniu(id)" class="btn btn-default" type="button">气压</button>
              <button id="28"  onclick="anniu(id)" class="btn btn-default" type="button">电压</button>
            </div>
            <div >
              <span style="width: 35px;display:inline-block;">H027</span>
              <button id="7"  onclick="anniu(id)" class="btn btn-default" type="button">温度</button>
              <button id="18"  onclick="anniu(id)" class="btn btn-default" type="button">气压</button>
              <button id="29"  onclick="anniu(id)" class="btn btn-default" type="button">电压</button>
            </div>
            <div >
              <span style="width: 35px;display:inline-block;">H028</span>
              <button id="8"  onclick="anniu(id)" class="btn btn-default" type="button">温度</button>
              <button id="19"  onclick="anniu(id)" class="btn btn-default" type="button">气压</button>
              <button id="30"  onclick="anniu(id)" class="btn btn-default" type="button">电压</button>
            </div>
            <div >
              <span style="width: 35px;display:inline-block;">H029</span>
              <button id="9"  onclick="anniu(id)" class="btn btn-default" type="button">温度</button>
              <button id="20"  onclick="anniu(id)" class="btn btn-default" type="button">气压</button>
              <button id="31"  onclick="anniu(id)" class="btn btn-default" type="button">电压</button>
            </div>
            <div >
              <span style="width: 35px;display:inline-block;">H030</span>
              <button id="10"  onclick="anniu(id)" class="btn btn-default" type="button">温度</button>
              <button id="21"  onclick="anniu(id)" class="btn btn-default" type="button">气压</button>
              <button id="32"  onclick="anniu(id)" class="btn btn-default" type="button">电压</button>
            </div>
          </div>

          <div style="height: 50px"></div>
          <div >
            选择时间
            <select style="width: 100px" onchange="settime(value)" class="selectpicker " id="jiaoyanwei">
                  <option value=30 >一分钟</option>
                  <option value=300 >十分钟</option>
                  <option value=1800 >一小时</option>
              <option value=5400 >三小时</option>
              <option value=43200 >一天</option>
                </select>
          </div>
          <button style="width: 120px" class="btn" id="shuaxin" onclick="shuaxin()" >开启实时更新</button>

          <div style="height: 1000px"></div>
          <button style="width: 120px" class="btn" id="julishuaxin" onclick="julishuaxin()" >距离刷新</button>
        </div>
        <div class="span10">
          <div class="row-fluid">
            <div id="container" style=" width: 100%; height:1800px">
              <script type="text/javascript">
                var anniuarr=[
                  false,false,false,
                  false,false,false,
                  false,false,false,
                  false,false,false,
                  false,false,false,
                  false,false,false,
                  false,false,false,
                  false,false,false,
                  false,false,false,
                  false,false,false,
                  false,false,false
                ]
                var charttype='line';
                var shuaxinbool=false;
                var julishuaxinbool=false;
                var shijian=30;
                var alldata=[4][11];
                var names=["S000","H021","H022","H023","H024","H025","H026","H027","H028","H029","H030"]
                var colors=['#000000','#FF001F','#3F00FF','#FF023F','#FF061F','#012200','#FF0011','#FF55FF','#F150FF','#F7541F','#0F00FF']
                var diansize=10;
                var ref="";
                var yzhi=[0,10000,0,200000,0,9]
                /*设置y最大值*/
                function setvalue(value,id){
                  if(id==='wjia')yzhi[0]=value;
                  else if(id==='wjian')yzhi[1]=value;
                  else if(id==='qjia')yzhi[2]=value;
                  else if(id==='qjian')yzhi[3]=value;
                  else if(id==='djia')yzhi[4]=value;
                  else if(id==='djian')yzhi[5]=value;
                  jisuan();
                }
                function yxiugai(){
                  yzhi=[0,10000,0,200000,0,9]
                  for (var i = 0; i <=10; i++) {
                    for (var j = 0; j < alldata[i].length; j++) {
                      if(alldata[i][j]!=null)
                      {
                        yzhi[0] = Math.max(yzhi[0], alldata[i][j][1])
                        yzhi[1] = Math.min(yzhi[1], alldata[i][j][1])
                      }
                    }
                  }
                  for (var i = 11; i <=21; i++) {
                    for (var j = 0; j < alldata[i].length; j++) {
                      if(alldata[i][j]!=null) {
                        yzhi[2] = Math.max(yzhi[2], alldata[i][j][1])
                        yzhi[3] = Math.min(yzhi[3], alldata[i][j][1])
                      }
                    }
                  }
                  for (var i = 22; i <=32; i++) {
                    for (var j = 0; j < alldata[i].length; j++) {
                      if(alldata[i][j]!=null) {
                        yzhi[4] = Math.max(yzhi[4], alldata[i][j][1])
                        yzhi[5] = Math.min(yzhi[5], alldata[i][j][1])
                      }
                    }
                  }
                  option.yAxis.max=yzhi[0]+(yzhi[0]-yzhi[1])*0.2;
                  option.yAxis.min=yzhi[1]-(yzhi[0]-yzhi[1])*0.2;
                  qiyaoption.yAxis.max=yzhi[2]+(yzhi[2]-yzhi[3])*0.2;
                  qiyaoption.yAxis.min=yzhi[3]-(yzhi[2]-yzhi[3])*0.2;
                  dianyaoption.yAxis.max=yzhi[4]+(yzhi[4]-yzhi[5])*0.2;
                  dianyaoption.yAxis.min=yzhi[5]-(yzhi[4]-yzhi[5])*0.2;
                }
                /*获取气压等数据*/
                function getdata(){
                  $.ajax({
                    url:"/getdata",
                    success:function (data){
                      alldata=data;
                      yxiugai()
                    }
                  })
                }
                /*获取距离数据*/
                function getjuli(){
                  $.ajax({
                    url:"/getjuli",
                    success:function (data){
                      julijisuan(data);
                    }
                  })
                }
                /*刷新气压等数据*/
                function shuaxin(){
                  shuaxinbool=!shuaxinbool;
                  if(shuaxinbool){
                    $('#shuaxin').addClass("btn-success")
                    $('#shuaxin').text("关闭实时刷新")
                    ref = setInterval(function(){
                      getdata()
                      jisuan()
                    },1000*5);
                  }
                  else {
                    $('#shuaxin').removeClass("btn-success");
                    $('#shuaxin').text("开启实时刷新")
                    clearInterval(ref);
                  }
                }
                /*刷新距离数据*/
                function julishuaxin() {
                  julishuaxinbool = !julishuaxinbool;
                  if (julishuaxinbool) {
                    $('#julishuaxin').addClass("btn-success")
                    $('#julishuaxin').text("关闭距离刷新")
                    ref = setInterval(function () {
                      getjuli()
                    }, 1000 * 11);
                  } else {
                    $('#julishuaxin').removeClass("btn-success");
                    $('#julishuaxin').text("开启距离刷新")
                    clearInterval(ref);
                  }
                }
                /*设置显示时间*/
                function settime(time){
                  $.ajax({
                    url:"/settime",
                    data: {"time": time},
                    success:function (data){
                      shijian=time;
                      alldata=data;
                      option.xAxis.max=shijian*2;
                      qiyaoption.xAxis.max=shijian*2;
                      dianyaoption.xAxis.max=shijian*2;
                      jisuan();
                    }
                  })
                }
                /*数据计算*/
                function jisuan(){
                    wendujisuan();
                    qiyajisuan();
                    dianyajisuan();
                }
                /*按钮*/
                function anniu(id){
                  anniuarr[id]=!anniuarr[id];
                  for(var i=0;i<33;i++)
                  {
                    $("#"+i).removeClass("btn-success")
                    $("#"+i).removeClass("btn-default")
                    if(anniuarr[i])$("#"+i).addClass("btn-success");
                    else $("#"+i).addClass("btn-default");
                  }
                  getdata();
                  if(id>=0&&id<=10)
                  wendujisuan();
                  if(id>=11&&id<=21)
                  qiyajisuan();
                  if(id>=22&&id<=32)
                  dianyajisuan();
                }
                /*启动函数*/
                $(function(){
                  getdata();
                  settime(shijian)
                  julishuaxin()
                })
              </script>
              <div id="wendumain" style="width: 100%;height:600px;"></div>
              <script type="text/javascript">

                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('wendumain'));

                // 指定图表的配置项和数据
                var option = {
                          xAxis: {name:'时间/s',max: shijian*2},
                          yAxis: {name:'温度/℃',
                            max: yzhi[0],
                            min: yzhi[1]
                          },
                          tooltip: {
                            formatter: ' {a}: ({c})'
                          },
                          series: []
                        };
                function wendujisuan(){
                  option.series=[];
                  for (var i = 0; i <=10; i++) {
                    if(anniuarr[i])
                    {
                      option.series.push({
                        name: names[i%11]+"温度",
                        symbolSize: diansize,
                        color: colors[i%11],
                        data: alldata[i],
                        type: charttype
                      });
                    }

                    else option.series.push({
                      name: names[i]+"温度",
                      symbolSize: 2,
                      color: colors[i],
                      data: [],
                      type: charttype
                    });
                  }
                  myChart.setOption(option);
                }

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
              </script>
              <div id="qiyamain" style="width: 100%;height:600px;"></div>
              <script type="text/javascript">
                // 基于准备好的dom，初始化echarts实例
                var qiyamyChart = echarts.init(document.getElementById('qiyamain'));

                // 指定图表的配置项和数据
                var qiyaoption= {
                  xAxis: {name:'时间/s',max: shijian*2},
                  yAxis: {name:'气压/pa',
                    max: yzhi[2],
                    min: yzhi[3]},
                  tooltip: {
                    formatter: ' {a}: ({c})'
                  },
                  series: []
                };
                function qiyajisuan(){
                  qiyaoption.series=[];
                  for (var i = 11; i <22; i++) {
                    if(anniuarr[i])
                    {
                      qiyaoption.series.push({
                        name: names[i%11]+"气压",
                        symbolSize: diansize,
                        color: colors[i%11],
                        data: alldata[i],
                        type: charttype
                      });
                    }

                    else qiyaoption.series.push({
                      name: names[i]+"气压",
                      symbolSize: 2,
                      color: colors[i],
                      data: [],
                      type: charttype
                    });
                  }
                  qiyamyChart.setOption(qiyaoption);
                }

                // 使用刚指定的配置项和数据显示图表。
                qiyamyChart.setOption(qiyaoption);
              </script>
              <div id="dianyamain" style="width: 100%;height:600px;"></div>
              <script type="text/javascript">
                // 基于准备好的dom，初始化echarts实例
                var dianyamyChart = echarts.init(document.getElementById('dianyamain'));

                // 指定图表的配置项和数据
                var dianyaoption= {
                          xAxis: {
                            name:'时间/s',max: shijian*2},
                          yAxis: {name:'电压/v',
                            max: yzhi[4],
                            min: yzhi[5]},
                          tooltip: {
                            formatter: ' {a}: ({c})'
                          },
                          series: []
                        };
                function dianyajisuan(){
                  dianyaoption.series=[];
                  for (var i = 22; i <33; i++) {
                    if(anniuarr[i])
                      dianyaoption.series.push({
                        name: names[i%11]+"电压",
                        symbolSize: diansize,
                        color: colors[i%11],
                        data: alldata[i],
                        type: charttype
                      });
                    else dianyaoption.series.push({
                      name: names[i]+"电压",
                      symbolSize: diansize,
                      color: colors[i],
                      data: [],
                      type: charttype
                    });
                  }
                  dianyamyChart.setOption(dianyaoption);
                }

                // 使用刚指定的配置项和数据显示图表。
                dianyamyChart.setOption(dianyaoption);
              </script>
            </div>
            <div id="julimain" style="width: 100%;height:1000px;"></div>
            <script type="text/javascript" th:inline=none>
              // 基于准备好的dom，初始化echarts实例
              var julimyChart = echarts.init(document.getElementById('julimain'));

              // 指定图表的配置项和数据
              // prettier-ignore
              var jizhan = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54];
              // prettier-ignore
              var toukui =names;
              // prettier-ignore
              var julidata = [];
              var julioption = {
                tooltip: {
                  formatter: function (params) {
                    // do some thing
                    return  '头盔：'+params.value[1]+'<br>基站：'+params.value[0]+'<br>距离：'+params.value[2]+'m'
                  }
                },
                visualMap: {
                  max: 20,
                  inRange: {
                    color: [
                      '#313695',
                      '#4575b4',
                      '#74add1',
                      '#abd9e9',
                      '#e0f3f8',
                      '#ffffbf',
                      '#fee090',
                      '#fdae61',
                      '#f46d43',
                      '#d73027',
                      '#a50026'
                    ]
                  }
                },
                xAxis3D: {
                  name:'基站',
                  data: jizhan,
                  axisLabel:{interval: 0}
                },
                yAxis3D: {
                  name:'头盔',
                  data: toukui,
                  min: 1,
                  axisLabel:{interval: 0}
                },
                zAxis3D: {
                  name:'距离',
                  max:100,
                  min:0
                },
                grid3D: {
                  boxWidth: 300,
                  boxDepth: 100,
                  viewControl: {
                    distance: 300,              //默认缩放比例,
                    alpha:50,
                    beta:0
                  },
                  light: {
                    main: {
                      intensity: 1.2
                    },
                    ambient: {
                      intensity: 0.3
                    }
                  }
                },
                series: [{
                  type: 'bar3D',
                  data: julidata.map(function (item) {
                    return {
                      value: [item[1], item[0], item[2]]
                    };
                  }),
                  shading: 'color',
                  label: {
                    show: false,
                    fontSize: 16,
                    borderWidth: 1
                  },
                  itemStyle: {
                    opacity: 1
                  },
                  emphasis: {
                    label: {
                      fontSize: 20,
                      color: '#900'
                    },
                    itemStyle: {
                      color: '#900'
                    }
                  }
                }]
              };
              function julijisuan(data){
                julioption.series[0].data=(data.map(function (item) {
                  return {
                    value: [item[1], item[0], item[2]]
                  };
                }))
                julimyChart.setOption(julioption);
              }
              // 使用刚指定的配置项和数据显示图表。
              julimyChart.setOption(julioption);
            </script>
          </div>
        </div>
      </div>

      <hr>

      <footer class="well">
        © Admin
      </footer>
    </div>
  </body>
</html>

